<template>
    <div style="background-color: var(--color-bg-2);">
        <input type="file" ref="fileDom" @change="fileChange"
            accept="video/mp4,video/mov,video/m4v,video/x-flv,video/quicktime,video/avi,video/webm,.mkv,audio/mp3,audio/mpeg,audio/m4a,audio/x-m4a,audio/wav,audio/flac,image/jpeg,image/jpg,image/png,image/png,image/gif,image/heif,image/heic">
        <div class="videosBox">
            <div v-for="video in videoStore.videos" :key="video.name! + video.duration!"
                @dragstart="timelineStore.dragged = video" draggable="true">
                <div>
                    <div class="videoCoverBox">
                        <div class="videoCover"
                            :style="{ background: `url(${video.cover}) 50% 50% / contain no-repeat var(--color-bg-3)` }">
                        </div>
                        <div class="videoCoverDuration">{{ formatTime(video.duration!) }}</div>
                    </div>
                    <div class="videoCoverName">{{ video.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useVideoStore } from "../store/video.ts"
import { clipTick } from "../utils/tool"
import { loadSprite, getMP4ClipFromFile } from "../utils/loadVideo"
import { formatTime } from "../utils/formatTime"
import { useTimelineStore } from "../store/timeline.ts"
import type sprType from "../type/spr.d";

const timelineStore = useTimelineStore()
const videoStore = useVideoStore()
const fileDom = ref<HTMLInputElement>()

async function fileChange() {
    let mp1 = await getMP4ClipFromFile(fileDom.value!.files![0])
    let videoInfo: sprType = await loadSprite(mp1, fileDom.value!.files![0].name)
    videoInfo.cover = await clipTick(mp1, 0)
    videoStore.push(videoInfo)
}

</script>

<style scoped>
.videosBox {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.videoCoverBox {
    width: 131px;
    height: 74px;
    position: relative;
}

.videoCoverDuration {
    position: absolute;
    bottom: 5px;
    right: 6px;
    color: white;
    font-size: 12px;
}

.videoCoverName {
    color: var(--color-text-1);
    font-size: 12px;
}

.videoCover {
    height: 100%;
}
</style>